<template>
  <div class="animate__animated animate__fadeInDown login-parsel">
    <section>
      <div class="color"></div>
      <div class="color"></div>
      <div class="color"></div>
      <div class="box">
        <div class="square" style="--i: 0"></div>
        <div class="square" style="--i: 1"></div>
        <div class="square" style="--i: 2"></div>
        <div class="square" style="--i: 3"></div>
        <div class="square" style="--i: 3"></div>
        <div class="square" style="--i: 4"></div>
        <div class="container">
          <div class="form">
            <el-form>
              <h2>手机号登录</h2>
              <div class="inputBox">
                <input
                  type="text"
                  placeholder="请输入手机号码"
                  v-model="phone"
                />
              </div>
              <div>
                <div class="inputBox">
                  <input type="text" placeholder="验证码" v-model="yz"/>
                </div>
                <div class="inputBox">
                  <input
                    type="text1"
                    value="获取验证码"
                    @click="changMaskFlag"
                    v-if="btnflag"
                  />
                  <button class="btn" v-if="!btnflag">
                    {{ second }} 秒后重新发送
                  </button>
                </div>
              </div>
              <div class="inputBox">
                <input type="submit1" value="登录" @click="phoneLogin" />
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <Vcode
      ref="vcodeRef"
      :show="isShow"
      :canvasWidth="sliderData.canvasWidth"
      :puzzleScale="sliderData.puzzleScale"
      :sliderSize="sliderData.sliderSize"
      :range="sliderData.sliderSize"
      :imgs="sliderData.imgs"
      :successText="sliderData.successText"
      :failText="sliderData.failText"
      :sliderText="sliderData.sliderText"
      @success="sliderData.callBack.success"
      @fail="sliderData.callBack.fail"
      @close="sliderData.callBack.close"
      @reset="sliderData.callBack.reset"
    />
    <div
      class="animate__animated animate__fadeInDown messagebox"
      ref="messageRef"
    >
      验证码：{{ code }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import "animate.css";
import {useRouter} from 'vue-router'
import  {ElMessage} from 'element-plus';

const router=useRouter()

import Vcode from "vue3-puzzle-vcode";

const phone = ref("");
const isShow = ref(false);
const second = ref(60);
const btnflag = ref(true);
const messageRef = ref(null);
const yz = ref("");

const vcodeRef = ref(null);
const sliderData = ref({
  isShow: true, // 是否显示验证码弹框
  type: "modal", // 内嵌模式，用不到
  canvasWidth: 310, // 主图区域的宽度，单位 px
  canvasHeight: 160, // 主图区域的高度，单位 px  提示高度属性没有，没有具体找问题
  puzzleScale: 1, // 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 这个比例比较舒服
  sliderSize: 50, // 左下角用户拖动的那个滑块的尺寸，单位 px
  range: 10, // 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合  这个逻辑值得吐槽，感觉有点问题
  imgs: [
    "/flower.webp",
    "/sen.jpg",
    "winter.jpg"
  ], // 网上下载一些图片，放在public的公共目录下面引入即可
  successText: "验证成功",
  failText: "哎呀，还差一点！！！",
  sliderText: "拖拽我以完成校验",
  className: "", // 给渲染出的元素一个lcass name，用于后续调整样式
  callBack: {
    success() {
      vcodeRef.value.reset();
      isShow.value = false;
      btnflag.value = false;
      setTimeout(() => {
        messageRef.value.style.display = "block";
      }, 2000);
      setTimeout(() => {
        messageRef.value.className = "animate__animated animate__fadeOutUp messagebox"
      }, 5000);
      
      getCode(4, str.value);
      let timer = setInterval(() => {
        second.value--;
        if (second.value == 0) {
          clearInterval(timer);
          btnflag.value = true;
          second.value = 60;
        }
      }, 1000);
      // 正常情况直接调登陆接口就够了
    },
    fail() {
      console.log("验证失败！");
    },
    close() {
      isShow.value = false; // 一般是用来关闭这个月验证？？？？
    },
    reset() {
      console.log("重置成功！");
    },
  },
});

const changMaskFlag = () => {
  isShow.value = true;
};

const phoneLogin =()=>{
  if(phone.value&&code.value){
    localStorage.setItem("phone",phone.value)
    router.push('/home')
  }else{
    ElMessage.warning("请输入完整信息")
  }
}

//生成随机验证码
const str = ref("1234567890qwertyoasdfgklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM");
const code = ref("");
const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};
const getCode = (len, s) => {
  let str1 = "";
  for (let i = 0; i < len; i++) {
    let index = randomNum(0, s.length - 1);
    str1 += s[index];
  }
  code.value = str1;
};
</script>

<style lang="scss" scoped>
.messagebox {
  width: 93%;
  height: 3rem;
  background: white;
  position: fixed;
  top: 0.5rem;
  left: 0.7rem;
  border-radius: 0.5rem;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  display: none;
  font-weight: bold;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  .white {
    width: 20rem;
    height: 15rem;
    background: white;
  }
}

.btn {
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 2rem;
  font-size: 0.9rem;
  background: white;
}
section {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
  display: flex;
  justify-content: center;
  align-items: center;
  .color {
    position: absolute;
    filter: blur(150px);
  }
}

section {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
section .color {
  position: absolute;
  filter: blur(150px);
}
section .color:nth-child(1) {
  top: -350px;
  width: 600px;
  height: 600px;
  background: #fec526;
}
section .color:nth-child(2) {
  bottom: -150px;
  left: 100px;
  width: 600px;
  height: 600px;
  background: #ffdd87;
}
section .color:nth-child(3) {
  bottom: 50px;
  right: 100px;
  width: 300px;
  height: 300px;
  background: #f9eac5;
}

.box {
  position: relative;
}
.box .square {
  position: absolute;
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  animation: animate 10s linear infinite;
  animation-delay: calc(-1s * var(--i));
}
@keyframes animate {
  0%,
  100% {
    transform: translateY(-40px);
  }
  50% {
    transform: translateY(40px);
  }
}
.box .square:nth-child(1) {
  top: -50px;
  left: 270px;
  width: 100px;
  height: 100px;
}
.box .square:nth-child(2) {
  top: 150px;
  left: -100px;
  width: 120px;
  height: 120px;
  z-index: 2;
}
.box .square:nth-child(3) {
  bottom: -20px;
  right: -15px;
  width: 80px;
  height: 80px;
  z-index: 2;
}
.box .square:nth-child(4) {
  top: -80px;
  left: 140px;
  width: 50px;
  height: 50px;
}
.box .square:nth-child(5) {
  bottom: -80px;
  left: 100px;
  width: 50px;
  height: 50px;
}
.container {
  position: relative;
  width: 22rem;
  min-height: 20rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2rem;
}
.form h2 {
  position: relative;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

.form .inputBox {
  width: 95%;
  margin-top: 20px;
}
.form h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 80px;
  height: 3px;
  background: #fff;
}
.form .inputBox input {
  width: 100%;
  padding: 0.5rem;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 35px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form .inputBox label {
  position: absolute;
}
.form .inputBox input[type="text1"] {
  background: #fff;
  color: #111;
  max-width: 80px;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.8rem;
}
.form .inputBox input[type="submit"] {
  background: #fff;
  color: #111;
  max-width: 100px;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.8rem;
}
.form .inputBox input[type="submit1"] {
  background: #fff;
  color: #111;
  max-width: 100%;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}
.forget {
  margin-top: 5px;
  color: #fff;
}
</style>